<template>
  <div v-if="album.length" style="background-color: #FFFACD;">
    <div id="exit">
      <i class="el-icon-arrow-left" @click="giveName">返回</i>
    </div>
    <div id="album">
      <img :src="this.album[0].picUrl">
      <div id="details">
        <div style="display: flex">
          <el-tag type="danger" effect="dark" id="tag">专辑</el-tag>
          <h2>{{this.album[0].title }}</h2>
        </div>

        <div id="icon">
          <i class="el-icon-star-off">{{this.count.subCount}}</i>
          <i class="el-icon-chat-dot-round">{{this.count.commentCount}}</i>
          <i class="el-icon-share">{{this.count.shareCount}}</i>
        </div>
        <div id="artist">
          歌手：<span>{{this.album[0].name}}</span>
        </div>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲列表" name="first">
          <m-song-table :data="songs" :height="440"></m-song-table>
        </el-tab-pane>
        <el-tab-pane label="评论" name="second">
          <m-comment :data="comments"></m-comment>
        </el-tab-pane>
        <el-tab-pane label="专辑详情" name="third">
          <h3>{{this.album[0].description}}</h3>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import songTable from "@/components/aplayer/songTable";
  import comment from "@/components/text/comment";
  import musicApi from "@/musicApi/apis/songs"
  import music from "@/until/js/music";
  export default {
    name: "introductionAlbum",
    props: ['receive'],
    components: {
      "m-song-table": songTable,
      "m-comment": comment
    },
    data() {
      return {
        activeName: 'first',
        songs: [],
        album: [],
        comments: [],
        count: {
          commentCount: '',
          shareCount: '',
          subCount: ''
        }
      }
    },
    mounted() {
    },
    methods: {
      giveName() {
        // 调用传入的函数，将name传递给父组件
        this.receive(10)
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取专辑数据
      getAlbum(id) {
        musicApi.getAlbum(id).then(res => {
          let data = res.data
          //获取专辑音乐
          this.songs = music.getSongsData(data.songs)
          // 获取专辑信息
          this.album = []
          let albumObj = {}
          albumObj.title = data.album.name
          albumObj.description = data.album.description
          albumObj.picUrl = data.album.picUrl
          albumObj.name = data.album.name
          this.album.push(albumObj)
        })
      },
      //获取专辑数据详情
      getAlbumCount(id) {
        musicApi.getAlbumDetail(id).then(res => {
          this.count.commentCount = res.data.commentCount
          this.count.shareCount = res.data.shareCount
          this.count.subCount = res.data.subCount
        })
      },
      //获取专辑评论
      getAlbumComment(id) {
        musicApi.getAlbumComment(id).then(res => {
          let data = res.data.comments;
          let arr = [];
          for (var i = 0; i < data.length; i++) {
            let obj = {}
            obj.avatarUrl = data[i].user.avatarUrl;
            obj.nickname = data[i].user.nickname;
            obj.content = data[i].content;
            obj.timeStr = data[i].timeStr;
            obj.location = data[i].ipLocation.location;
            arr.push(obj)
          }
          this.comments = arr
        })
      }
    },
    computed: {
      watchSongId() {
        return this.$store.state.albumId;
      }
    },
    watch: {
      watchSongId: {
        handler(newId) {
          this.getAlbumCount(newId)
          this.getAlbum(newId)
          this.getAlbumComment(newId)
        }
      }
    }
  }
</script>

<style scoped>
  #exit {
    cursor: pointer;
    display: block;
    }

  #album img {
    float: left;
    margin-top: 20px;
    margin-right: 30px;
    width: 120px;
  }

  #details {
    display: flex;
    flex-direction: column;
  }

  #tag {
    margin-right: 20px;
    margin-top: 20px;
  }

  #icon {
    display: flex;
  }

  #icon i {
    display: block;
    margin-right: 20px;
  }

  #artist {
    display: flex;
    line-height: 60px;
    color: rgba(198, 168, 55, 0.65);
    font-size: large;
  }
</style>